// Welcome screen widget styles
#welcomeScreen
  position: relative;

  .window-menu
    align-items: start
    height: 28px

    .minimize
      background-position: bottom
      background-position-y: 18px

.welcome-screen-loading-overlay
  position: absolute
  top: 0
  background-color: black
  width: 100%
  height: 100%
  opacity: 0.8
  z-index: 100
  display: flex
  align-items: center
  justify-content: center

  &-text
    padding-left: 10px
    color: white
    font-size: x-large
    font-style: italic

  .welcome-screen-loading-overlay-icon
    width: 32px
    height: 32px
    background-repeat: no-repeat
    background-position: center
    background-image: url("../../public/resources/welcome/loading_sign_dots_32.svg")
    animation: infinite linear
    animation-name: loading
    animation-duration: 3s

.welcome-logo
  background-image: url('../../public/resources/shared/codetracer_welcome_logo.svg')
  min-width: 62px
  min-height: 62px
  background-size: 62px 62px
  background-position: center
  margin-right: 12px
  background-repeat: no-repeat

.welcome-screen-wrapper
  color: WELCOME_SCREEN_TEXT_COLOR;
  background-color: WELCOME_SCREEN_BACKGROUND_COLOR;
  height: 100vh;
  position: relative;
  width: 100vw;
  z-index: 50
  display: flex;
  justify-content: center;
  align-items: center
  border-radius: 8px

  .welcome-screen
    position: relative
    height: fit-content
    background-color: gradien
    width: 700px
    padding: 48px
    padding-bottom: 60px
    background: WELCOME_SCREEN_BACKGROUND_COLOR
    display: flex
    flex-direction: column
    border-radius: 12px
    align-items: center
    border: 1px solid LINE_STROKE

    &.welcome-screen-loading
      cursor: wait !important

    .welcome-title
      position: relative
      font-family: 'SpaceGrotesk'
      text-align: start
      display: flex
      align-items: flex-end
      justify-content: space-between
      color: WELCOME_SCREEN_TEXT_COLOR
      width: -webkit-fill-available

      .welcome-text
        word-break: break-word
        display: flex
        align-items: center
        font-weight: BOLD_WEIGHT
        width: 304px
        font-size: 32px
        line-height: 34px
        letter-spacing: -0.32px

      .welcome-version
        color: WELCOME_SCREEN_VERSION_TEXT_COLOR
        font-size: 12px
        font-family: 'SpaceGrotesk'
        font-weight: 400
        line-height: normal
        text-align: center

    .welcome-content
      display: flex
      flex-direction: column
      align-items: center
      width: -webkit-fill-available

      .start-options
        position: relative
        display: flex
        width: -webkit-fill-available
        justify-content: space-between

        .start-option
          position: relative
          right: 0
          display: flex
          cursor: pointer
          justify-content: center
          font-family: 'SpaceGrotesk'

          &.hovered
            opacity: 1

        .inactive-start-option
          opacity: 0.2
          pointer-events: none

          &.hovered
            color: inherit
            opacity: 0.2

        .start-option-icon
          width: 100px
          height: 100px
          background-image: WELCOME_SCREEN_OPTIONS_RECORD_ICON
          background-repeat: no-repeat
          background-position: center

          &.hovered
            background-image: WELCOME_SCREEN_OPTIONS_RECORD_ICON_HOVERED
            opacity: 1

        .start-option-name
          text-align: center
          font-size: 14px
          font-weight: BOLD_WEIGHT
          letter-spacing: -0.14px
          line-height: 18px
          background-color: ACTIVE_ROW
          display: flex
          align-items: center
          color: WELCOME_SCREEN_OPTIONS_TEXT_COLOR
          justify-content: center
          white-space: nowrap
          padding: 6px
          padding-left: 14px
          padding-right: 14px
          border-radius: 6px

          &.hovered
            // color: WELCOME_SCREEN_OPTIONS_TEXT_COLOR_HOVERED
            // background-color: PRIMARY_BASE
            outline: 1px solid SEARCH_STROKE
            opacity: 1

      .no-recent-traces
        height: 67px;
        width: 350px;
        align-items: center;
        display: flex;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        font-style: italic;

      .recent-traces
        position: relative
        width: -webkit-fill-available
        background-color: SECONDARY_BASE
        border-radius: 6px
        padding: 8px
        margin-top: 48px
        margin-bottom: 48px
        padding-right: 0px

      .recent-traces-title
        text-align: start
        font-size: 18px
        font-weight: BOLD_WEIGHT
        line-height: 18px
        letter-spacing: -0.18px
        font-family: 'SpaceGrotesk'
        margin-bottom: 6px

      .recent-traces-list
        max-height: 172px
        overflow-y: scroll
        overflow-x: visible

        .recent-trace
          color: WELCOME_SCREEN_RECENT_TRACE_COLOR
          background-color: WELCOME_SCREEN_RECENT_PROJECT_BACKGROUND_COLOR
          height: 28px
          margin-top: 2px
          margin-bottom: 6px
          display: flex
          position: relative
          text-align: left
          border-radius: 4px
          width: -webkit-fill-available

          &:hover
            cursor: pointer
            background-color: PRIMARY_BASE

          .recent-trace-title
            display:flex
            align-items: center
            position: relative

            .separate-bar
              border-color: WELCOME_SCREEN_SEPARATE_BAR_COLOR

            .recent-trace-title-id,.recent-trace-title-content
              margin-left: 8px
              margin-right: 8px
              font-size: 14px
              font-weight: BOLD_WEIGHT
              font-family: 'FiraCode'
              line-height: 18px
              letter-spacing: -0.14px
              // font-weight: bold
              position: relative
              overflow: hidden
              white-space: nowrap
              text-overflow: ellipsis

          .recent-trace-title-content
            // seems to be required, so ellipsis can work
            max-width: 45ch
            // this could put an ellipsis in the beginning if long
            // but it seems it has problems with punctuation, and indeed with
            // path separators e.g. `/` going in the end
            // ( https://stackoverflow.com/a/74455333/438099 )
            // so: for now we're trying to limit the count of characters
            // programatically in the frontend code, and put there an
            // `..` ellipsis in the beginning if needed
            // as it's more useful to see the end of the path with the filename
            // usually
            //
            // direction: rtl

          .recent-trace-info
            height: 40px
            display: flex
            position: relative

            .recent-trace-date
              padding-left: 10px
              width: 50%
              text-align: left
              display: flex
              align-items: center

            .recent-trace-duration
              width: 50%
              text-align: right
              display: flex
              align-items: center
              color: #667283

  .new-record-screen
    position: relative
    display: flex
    align-items: center
    justify-content: center
    z-index: 50

    hr
      border-color: HEADER_ELEMENT_BACKGROUND_COLOR

    .new-record-screen-content
      position: relative
      width: 700px
      background: WELCOME_SCREEN_BACKGROUND_COLOR
      border: 1px solid LINE_STROKE
      border-radius: 12px
      padding: 48px
      padding-bottom: 60px

      .welcome-logo
        min-width: 40px
        max-width: 40px
        min-height: 40px
        background-size: 40px 40px

    .new-record-title
      position: relative
      font-size: 32px
      font-family: 'SpaceGrotesk'
      font-weight: BOLD_WEIGHT
      text-align: start
      width: 100%
      letter-spacing: -0.32px
      line-height: 32px
      margin-bottom: 32px
      margin-top: 32px

    .new-record-form

      .new-record-form-row
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 5px

        .form-validation-row
          height: 16px;
          font-size: 14px;
          position: relative;
          width: 100%;
          text-indent: 13vw;
          font-style: italic;
          color: FORM_INVALID_INPUT_COLOR;

        .new-record-input-row
          position: relative
          width: 100%
          display: flex
          align-items: center
          margin-bottom: 16px

        .checkmark
          position: relative
          margin-right: 8px !important
          top: 0 !important

        label
          margin-bottom: 0 !important
          position: relative
          width: fit-content
          text-align: left
          color: NEW_RECORD_LABEL_COLOR
          font-family: 'SpaceGrotesk'
          font-weight: bold
          font-size: 14px
          font-weight: 400

        input
          background-color: NEW_RECORD_SCREEN_INPUT_BACKGROUND_COLOR
          margin-left: 0px !important
          margin-bottom: 0px !important

          &.disabled
            pointer-events: none
            opacity: 0.4

          &.invalid
            outline: 2px solid FORM_INVALID_INPUT_COLOR

        button
          min-width: 8px
          background-color: NEW_RECORD_SCREEN_BUTTON_BACKGROUND_COLOR
          margin-left: 8px
          position: relative
          border: 0
          border-radius: 6px
          color: TEXT_CONTENT_COLOR
          font-weight: 400
          padding: 0px !important
          padding-left: 22px !important
          padding-right: 22px !important
          font-family: 'SpaceGrotesk'
          font-size: 14px
          height: 28px
          display: flex
          align-items: center
          justify-content: center

          &.disabled
            pointer-events: none
            opacity: 0.4

          &:hover
            opacity: 0.5
            // background-color: TEXT_CONTENT_COLOR
            // color: NEW_RECORD_SCREEN_INPUT_BACKGROUND_COLOR

          &.cancel-button
            background-color: DEBUG_BUTTON_BORDER_COLOR !important
            margin: 0px !important

          &.confirmation-button
            background-color: NEW_RECORD_CONFIRMATION_BUTTON_BACKGROUND !important
            margin-left: 8px !important
            width: 146px
            padding-left: 16px
            padding-right: 16px

      .new-record-form-row:last-child
        display: flex
        flex-direction: row !important
        justify-content: flex-start !important

    .new-record-result-wrapper
      display: flex
      align-items: center
      justify-content: center
      margin-bottom: 16px
      border-radius: 6px
      padding: 8px

      &.empty
        outline: none

      &.in-progress
        outline: 1px solid NOTIFICATION_INFO_COLOR

      &.failed
        outline: 1px solid NOTIFICATION_ERROR_COLOR

      &.success
        outline: 1px solid NOTIFICATION_SUCCESS_COLOR

      .new-record-result
        position: relative
        width: 100%
        text-align: center
        font-family: 'SpaceGrotesk'
        display: flex
        align-items: center

        &.empty
          display: none

        .new-record-status-icon
          position: relative
          width: 24px
          height: 24px
          background-repeat: no-repeat
          background-size: 18px 18px
          background-position: center
          margin-right: 4px

          &.in-progress
            background-image: url("../../public/resources/welcome/loading_sign_dots_128.svg")
            animation: infinite linear
            animation-name: loading
            animation-duration: 3s

          &.failed
            background-image: NOTIFICATION_ERROR_IMG
          &.success
            background-image: NOTIFICATION_SUCCESS_IMG

        .new-record-result-info
          text-align: center
          position: relative
          width: 100%
          height: 30px
          font-family: "FiraCode"
          font-size: 20px

.online-functionality-buttons
  display: flex
  padding-right: 2px

  .recent-trace-buttons
    margin-left: 8px
    margin-top: 2px
    margin-bottom: 6px
    height: 28px
    width: 28px
    background-color: DEBUG_BUTTON_BORDER_COLOR
    border-radius: 4px
    cursor: pointer
  upload
    &:hover
      outline: 1px solid WELCOME_SCREEN_SEPARATE_BAR_COLOR

    &:active
      background-color: DEBUG_BUTTON_ACTIVE_BACKGROUND

    &.trace-info-button-active
      background-color: WELCOME_SCREEN_ACTIVE_BACKGROUND

  .recent-trace-buttons-image
    background-repeat: no-repeat
    background-size: 16px 16px
    background-position: center
    height: 28px

  .progress-circle
    width: 20px
    height: 20px
    border-radius: 50%
    position: absolute
    background-image: conic-gradient(#6B6B6B 0% 0%, #2C2C2C 0% 100%)
    background-size: auto
    z-index: 1
    transform: translate(4px, 4px)

  .inner-circle
    width: 14px
    height: 14px
    border-radius: 50%
    background-color: ACTIVE_ROW
    position: absolute
    z-index: 2
    transform: translate(7px, 7px)

  #progress-bar
    position: relative

  #trace-upload-button
    background-image: WELCOME_SCREEN_UPLOAD_BUTTON

  #trace-copy-button
    background-image: WELCOME_SCREEN_COPY_BUTTON

  #trace-delete-button
    background-image: WELCOME_SCREEN_DELETE_BUTTON

  #trace-info-button
    background-image: WELCOME_SCREEN_INFO_BUTTON

  #trace-info-button-active
    background-image: WELCOME_SCREEN_INFO_ACTIVE_BUTTON

  .welcome-path-active
    opacity: 1
    visibility: visible
    height: 24px
    left: calc(100% + 8px)
    position: absolute
    width: fit-content

    &:after
      top: 18%
      left: -14px
      border-color: transparent TOOLTIP_BACKGROUND transparent transparent !important

.recent-trace-container
  display: flex
  align-items: center
  justify-content: space-between

.new-online-trace-form
  input
    padding-left: 8px
    background-image: none

.recent-transactions
  display: flex
  text-align: left
  font-size: 18px
  font-weight: 700
  background-color: SECONDARY_BASE
  border-radius: 6px
  padding: 16px
  flex-direction: column

.table-column-names
  display: flex
  text-align: left
  justify-content: space-between
  font-size: 14px
  font-weight: 400
  font-family: "FiraCode"

  #tx-hash
    width: 118px
  #tx-status
    width: 72px
    padding-left: 4px
  #tx-from
    width: 120px
  #tx-to
    width: 124px
  #tx-when
    width: 60px
  #tx-action
    width: 50px
    text-align: end

.recent-transactions-container
  display: flex
  justify-content: space-between
  font-size: 14px
  font-style: normal
  font-weight: 400

.recent-transactions
  max-height: 360px
  overflow: scroll

.recent-transaction
  display: flex
  justify-content: space-between
  text-align: center
  align-items: center
  width: -webkit-fill-available
  color: WELCOME_SCREEN_RECENT_TRACE_COLOR
  font-family: 'FiraCode'

  #tx-success
    color: STATUS_SUCCESS

  #tx-unsuccess
    color: STATUS_UNSUCCESS

.action-transaction-button
  margin-left: 8px
  margin-top: 2px
  margin-bottom: 6px
  height: 28px
  width: 28px
  background-color: DEBUG_BUTTON_BORDER_COLOR
  border-radius: 4px
  cursor: pointer
  background-image: RECENT_TRANSACTION_ACTION_BUTTON
  background-repeat: no-repeat
  background-position: center
  min-width: 28px

.recent-transaction-title
  margin-bottom: 16px

.transactions
  margin-bottom: 0px !important

.stylus-content
  width: 850px !important
